<template>
	<view class="zaiui-home-box" :class="show?'show':''">
		<!--欢迎-->
		<welcome-tip content="欢迎光临" :show="true" :c_s="3000" @closeFinish="welcomeClose" />

		<!--轮播背景-->
		<swiper-background :list_data="swiperInfo.list" :indexs="swiperInfo.index" :show="swiperInfo.show" :welcome="swiperInfo.welcome" />

		<view class="zaiui-head-search-box" :class="headInfo.Class" :style="[{backgroundColor:'rgba(229, 77, 66,'+ headInfo.opacity +')'}]">

			<!--小程序端的标题-->
			<view class="text-center text-white zaiui-small-routine-title">首页</view>

			<!--搜索框-->
			<view class="cu-bar search zaiui-search-box">
				<view class="search-form round" @tap="searchTap">
					<text class="cuIcon-search" />
					<text>口罩</text>
				</view>
				<view class="action text-white" @tap="toNews">消息</view>
			</view>

			<!--选项卡-->
			<view class="zaiui-flex-tab show">
				<view class="flex text-white">
					<text class='hottext'>热搜：</text>
					<view class="basis-xxl">
						<scroll-view scroll-x class="nav z" scroll-with-animation :scroll-left="headTab.scrollLeft">
							<block v-for="(item,index) in headTab.list" :key="index">
								<view class="cu-item" :class="index==headTab.TabCur?'select':''" @tap="tabSelect" :data-id="index">
									<view>{{item}}</view>
									<view class="tab-dot bg-white" />
								</view>
							</block>
						</scroll-view>
					</view>
				</view>
			</view>
		</view>

		<!--中间内容区域-->
		<view class="zaiui-view-content" :class="[viewContent.welcome?'welcome':'',headTab.TabCur==0?'show':'']">
			<!--轮播图-->
			<view class="zaiui-swiper-box">
				<swiper class="screen-swiper square-dot c" autoplay circular indicator-dots :current="swiperInfo.index" @change="swiperChange">
					<swiper-item v-for="(item,index) in swiperInfo.list" :key="index">
						<view class="swiper-padding">
							<image :src="item.swiper" mode="widthFix" />
						</view>
					</swiper-item>
				</swiper>
			</view>

			<!--滑动菜单-->
			<view class="text-center">
				战略合作
			</view>
			<grid-menu-list :list_data='gridMenuData' @listTap='gridMenuTap' />

			<!--商品tab-->
			<view class="zaiui-goods-tab-box">
				<scroll-view scroll-x class="nav z margin-tb-sm">
					<view class="flex text-center">
						<block v-for="(item,index) in goodsTabData.list" :key="index">
							<view class="cu-item flex-sub nf" :class="item.id==goodsTabData.TabCur?'select':''" @tap="goodsTab" :data-id="item.id">
								<view :class="item.id == goodsTabData.TabCur?'text-red':''">{{item.title}}</view>
								<view class="tab-dot bg-red" />
							</view>
						</block>
					</view>
				</scroll-view>
			</view>

			<view class="zaiui-tab-list">
				<!--商品列表-->
				<goods-list :list_data="goodsData" @listTap="goodsListTap" show />
			</view>

			<!--占位底部距离-->
			<view class="cu-tabbar-height" />
		</view>
	</view>
</template>

<script>
	//加载组件  
	import welcomeTip from '@/components/zaiui-common/basics/welcome-tip';
	import swiperBackground from '@/components/zaiui-common/basics/swiper-background';
	import gridMenuList from '@/components/zaiui-common/list/grid-menu-list';
	import goodsList from '@/components/zaiui-common/list/goods-list';
	import footerTabbar from '@/components/zaiui-common/footer/footer-tabbar';
	//======================================================================
	import _home_data from '@/static/zaiui/data/home.js'; //虚拟数据
	import _tool from '@/static/zaiui/util/tools.js';
	import {
		search,
		info
	} from '@/http/request.js'
	export default {
		name: 'home',
		components: {
			welcomeTip,
			swiperBackground,
			gridMenuList,
			goodsList,
			footerTabbar
		},
		data() {
			return {
				swiperInfo: {
					index: 0,
					show: true,
					welcome: true,
					list: []
				},
				headInfo: {
					Class: "",
					opacity: 0,
				},
				goodsShow: true,
				headTab: {
					TabCur: 0,
					scrollLeft: 0,
					list: []
				},
				viewContent: {
					welcome: true,
				},
				gridMenuData: [],
				goodsTabData: {
					TabCur: 1,
					page: 0,
					list: []
				},
				goodsData: [],
			}
		},
		props: {
			show: {
				type: Boolean,
				default: true
			},
			scrollY: {
				type: Number,
				default: 0
			},
			scrollBottom: {
				type: Number,
				default: 0
			}
		},
		watch: {
			scrollY() {
				this.setPageScroll(this.scrollY);
			},
			scrollBottom() {
				if (this.scrollBottom != 0) {
					this.setReachBottom();
				}
			},
		},
		created() {
			//加载虚拟数据
			this.headTab.list = _home_data.tab();
			this.swiperInfo.list = _home_data.swiper();
			this.gridMenuData = _home_data.nav();
			this.goodsTabData.list = _home_data.goodsTab();
			//商品列表数据
			this.searchGoods()
			// let GoodsData = _home_data.goodsList();
			// this.goodsData = GoodsData;
			this.headInfo.Class = 'welcome';
		},
		mounted() {
			uni.pageScrollTo({
				scrollTop: 0,
				duration: 0
			});
		},
		methods: {
			//页面被滚动
			setPageScroll(scrollTop) {
				//console.log(scrollTop);
				if (this.headTab.TabCur == 0) {
					if (scrollTop <= 100) {
						let num = scrollTop / 100;
						this.headInfo.opacity = num;
					} else if (scrollTop > 100) {
						this.headInfo.opacity = 1;
					}
				}
			},
			//触底了
			setReachBottom() {
				
				this.show && this.searchGoods();
			},
			async searchGoods() {
				let {
					TabCur,
					page,
					list
				} = this.goodsTabData;
				let title = list.find(v => v.id == TabCur).title
				page++;
				let res = await search(title, page)
				this.goodsData.push(...res)
				// console.log(res)
				// info({
				// 	goods_id: 172332951205,
				// 	search_id: "fc2af02c-a32a-4fe0-bc2f-e58b2e61c837"
				// }).then(res=>{console.log(res)})
			},
			//欢迎提示关闭事件
			welcomeClose(bol) {
				this.swiperInfo.welcome = bol;
				this.headTab.welcome = bol;
				let Class = this.headInfo.Class;
				this.headInfo.Class = Class.replace(/welcome/g, '');
				this.viewContent.welcome = bol;
				//设置颜色
				_tool.setBarColor(false);
			},
			//搜索框下的tab菜单被点击
			tabSelect(e) {
				let index = e.currentTarget.dataset.id;
				uni.navigateTo({
					url: "/pages/home/search?keyword=" + this.headTab.list[index]
				});

			},
			swiperChange(e) {
				this.swiperInfo.index = e.detail.current;
			},
			gridMenuTap(e) {
				console.log(e);
			},
			//商品列表上的分类tab被点击
			goodsTab(e) {
				this.goodsTabData.TabCur = e.currentTarget.dataset.id;
				this.goodsTabData.page = 0;
				this.goodsData = [];
				this.searchGoods();
				uni.pageScrollTo({
					scrollTop: 1060,
					duration: 200
				});
			},
			goodsListTap(e) {
				let {goods_id,search_id,goods_sign} = e.data
				let {
					TabCur,
					list
				} = this.goodsTabData;
				let title = list.find(v => v.id == TabCur).title
				uni.navigateTo({
					url: `/pages/goods/goods?goods_sign=${goods_sign}&search_id=${search_id}&type=${title}`
				});
			},
			searchTap() {
				uni.navigateTo({
					url: "/pages/home/search"
				});
			},
			toNews(){
				uni.navigateTo({
					url: "/pages/news/news"
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.center {
		text-align: center;
	}

	.fuck-kill {}

	.zaiui-head-search-box {
		position: fixed;
		width: 100%;
		top: 0;
		z-index: 9999;
		background-color: rgba(229, 77, 66, 0);
		padding-top: var(--status-bar-height);
		transition: top .25s;
		padding-bottom: 10rpx;

		.zaiui-search-box {
			position: relative;
		}

		.zaiui-flex-tab {
			position: relative;
			transition: opacity .25s;

			.flex {
				.hottext {
					flex-basis: 20%;
					margin-top: 15rpx;
					text-align: center;
					width: 20%;
					z-index: 1;
				}

				.basis-xxl {
					flex-basis: 80%;
					width: 80%;
					z-index: 1;
				}
			}
		}
	}

	.zaiui-head-search-box.welcome {
		top: calc(var(--status-bar-height) + 101rpx);
		transition: top .25s;
	}

	.zaiui-view-content {
		display: none;
		width: 100%;

		/* #ifdef APP-PLUS */
		margin-top: calc(var(--status-bar-height) + 30rpx);
		/* #endif */

		/* #ifdef H5 */
		margin-top: calc(var(--status-bar-height) + 70rpx);
		/* #endif */

		/* #ifdef MP */
		margin-top: calc(var(--status-bar-height) + 85rpx);
		/* #endif */

		.zaiui-tab-list {
			position: relative;
			width: 100%;
		}
	}

	.zaiui-view-content.welcome {
		/* #ifdef APP-PLUS */
		margin-top: calc(var(--status-bar-height) + 180rpx);
		/* #endif */

		/* #ifdef H5 */
		margin-top: calc(var(--status-bar-height) + 220rpx);
		/* #endif */

		/* #ifdef MP */
		margin-top: calc(var(--status-bar-height) + 220rpx);
		/* #endif */

		transition: all .25s;
	}

	.zaiui-view-content.show {
		display: block;
	}

	.zaiui-swiper-box {
		width: 100%;

		.screen-swiper {
			height: 230rpx;
			min-height: 230rpx;

			.swiper-padding {
				padding: 0 25rpx;
			}
		}
	}

	.red-envelopes {
		width: 100%;
	}

	.zaiui-goods-tab-box {
		position: sticky;
		padding: 2rpx 0;
		transition: all .25s;
		z-index: 9999;
		background: #fff;

		/* #ifndef MP */
		top: calc(var(--status-bar-height) + 101rpx);
		/* #endif */

		/* #ifdef MP */
		top: calc(var(--status-bar-height) + 161rpx);
		/* #endif */

		.cu-tag.z {
			top: 0px;
			right: -32.72rpx;
			font-size: 20rpx;
			padding: 19rpx 6rpx;
			transform: scale(0.8);
		}
	}

	.zaiui-ad-img {
		width: 100%;
	}

	.zaiui-tab-list-title {
		.img-aau {
			width: 101.81rpx;
			margin-top: 12.72rpx;
		}

		.text-right {
			.img-aau {
				margin-right: 14.54rpx;
			}
		}

		.text-left {
			.img-aau {
				margin-left: 14.54rpx;
			}
		}
	}

	.zaiui-add-btn-view-box {
		position: fixed;
		z-index: 999999;
		bottom: 181.81rpx;
		right: 27.27rpx;

		.cu-btn {
			margin: auto;
			width: 81.81rpx;
			height: 81.81rpx;
			font-weight: 800;
			border-radius: 50%;
			font-size: 36.36rpx;
			border: 9.09rpx solid #fff;
			box-shadow: 0 0 14.54rpx 7.27rpx #d0d0d0;
		}
	}

	.zaiui-home-box {
		display: none;
	}

	.zaiui-home-box.show {
		display: block;
	}
</style>
